ng-template(#tip)
  | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum dapibus nulla ac imperdiet.
  | Aenean ut efficitur nunc.

.slds-m-around_xx-large(style="max-width: 700px;")
  .slds-grid.slds-grid_align-center.slds-gutters_direct-medium.slds-m-bottom_xx-small
    button(type="button", nglButton, nglTooltipPlacement='top-left-corner', [nglTooltip]="tip", nglTooltipOpenAuto) top-left-corner
    button(type="button", nglButton, nglTooltipPlacement='top-left', [nglTooltip]="tip", nglTooltipOpenAuto) top-left
    button(type="button", nglButton, nglTooltipPlacement='top', [nglTooltip]="tip", nglTooltipOpenAuto) top
    button(type="button", nglButton, nglTooltipPlacement='top-right', [nglTooltip]="tip", nglTooltipOpenAuto) top-right
    button(type="button", nglButton, nglTooltipPlacement='top-right-corner', [nglTooltip]="tip", nglTooltipOpenAuto) top-right-corner
  .slds-grid.slds-grid_align-spread.slds-m-bottom_xx-small
    .slds-col
      .slds-grid.slds-grid_vertical
        span.slds-m-bottom_xx-small: button.slds-button_stretch(type="button", nglButton, nglTooltipPlacement='left-top-corner', [nglTooltip]="tip", nglTooltipOpenAuto) left-top-corner
        span.slds-m-bottom_xx-small: button.slds-button_stretch(type="button", nglButton, nglTooltipPlacement='left-top', [nglTooltip]="tip", nglTooltipOpenAuto) left-top
        span.slds-m-bottom_xx-small: button.slds-button_stretch(type="button", nglButton, nglTooltipPlacement='left', [nglTooltip]="tip", nglTooltipOpenAuto) left
        span.slds-m-bottom_xx-small: button.slds-button_stretch(type="button", nglButton, nglTooltipPlacement='left-bottom', [nglTooltip]="tip", nglTooltipOpenAuto) left-bottom
        span: button.slds-button_stretch(type="button", nglButton, nglTooltipPlacement='left-bottom-corner', [nglTooltip]="tip", nglTooltipOpenAuto) left-bottom-corner
    .slds-col
      .slds-grid.slds-grid_vertical-align-center(style="height: 100%;")
        .slds-col
          strong 20 placement choices
    .slds-col
      .slds-grid.slds-grid_vertical.slds-grid_align-end
        span.slds-m-bottom_xx-small: button.slds-button_stretch(type="button", nglButton, nglTooltipPlacement='right-top-corner', [nglTooltip]="tip", nglTooltipOpenAuto) right-top-corner
        span.slds-m-bottom_xx-small: button.slds-button_stretch(type="button", nglButton, nglTooltipPlacement='right-top', [nglTooltip]="tip", nglTooltipOpenAuto) right-top
        span.slds-m-bottom_xx-small: button.slds-button_stretch(type="button", nglButton, nglTooltipPlacement='right', [nglTooltip]="tip", nglTooltipOpenAuto) right
        span.slds-m-bottom_xx-small: button.slds-button_stretch(type="button", nglButton, nglTooltipPlacement='right-bottom', [nglTooltip]="tip", nglTooltipOpenAuto) right-bottom
        span: button.slds-button_stretch(type="button", nglButton, nglTooltipPlacement='right-bottom-corner', [nglTooltip]="tip", nglTooltipOpenAuto) right-bottom-corner
  .slds-grid.slds-grid_align-center.slds-gutters_direct-medium
    button(type="button", nglButton, nglTooltipPlacement='bottom-left-corner', [nglTooltip]="tip", nglTooltipOpenAuto) bottom-left-corner
    button(type="button", nglButton, nglTooltipPlacement='bottom-left', [nglTooltip]="tip", nglTooltipOpenAuto) bottom-left
    button(type="button", nglButton, nglTooltipPlacement='bottom', [nglTooltip]="tip", nglTooltipOpenAuto) bottom
    button(type="button", nglButton, nglTooltipPlacement='bottom-right', [nglTooltip]="tip", nglTooltipOpenAuto) bottom-right
    button(type="button", nglButton, nglTooltipPlacement='bottom-right-corner', [nglTooltip]="tip", nglTooltipOpenAuto) bottom-right-corner

